<template>
<div class="showpicWrapper">
    <draggable element="div" v-model="plist" :options="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false" @change="hlChange">
        <transition-group type="transition" :name="'flip-list'" class="ui doubling cards" tag="div">

            <div v-for="(val,index) in plist" @click='showBigPic(val)' class="ui card" :key="index">
                <i class='icon circular tiny close' @click.stop='toRemove(val)'></i>
                <div class="image">
                    <img :src="val" alt="点击可看大图">
                </div>
            </div>
        </transition-group>
    </draggable>
</div>
</template>

<script type="text/ecmascript-6">
import tool from 'src/util/tool';
import draggable from 'vuedraggable';
import util from '_util/index';


export default {
    data() {
        return {
            plist: [],
            editable: true,
            isDragging: false,
            delayedDragging: false
        }
    },
    components: {
        draggable,
    },
    methods: {
        hlChange() {
            this.$emit('sorted', this.plist)
        },
        onMove({
            relatedContext,
            draggedContext
        }) {
            const relatedElement = relatedContext.element;
            const draggedElement = draggedContext.element;
            // tool.cl(relatedElement, draggedElement)
            // return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
            return true
        },
        showBigPic(img) {
            util.eventEmit(this, 'show_pic_real', {
                img
            });
        },
        toRemove(val) {
            this.plist.remove(val);
            this.$emit('toRemove', val)
        },
        setList(pics) {
            let tmp = []
            if (pics.length > 0) {
                tmp = pics.map(val => {
                    if (val.indexOf('http')>-1){
						return  val
					}else{
						return this.imgpre + val
					}
                })
            }
            this.plist = tmp || [];
        }
    },
    watch: {
        pics: function(val, old) {
            if (val != old) {
                this.setList(val)
            }
        },
        isDragging(newValue) {
            if (newValue) {
                this.delayedDragging = true
                return
            }
            this.$nextTick(() => {
                this.delayedDragging = false
            })
        }
    },
    computed: {
        dragOptions() {
            return {
                animation: 0,
                group: 'description',
                disabled: !this.editable,
                ghostClass: 'ghost'
            };
        },
        placeholder() {
            return `请输入${this.field.title}`
        },
    },
    props: ['field', 'pics', 'imgpre'],
    created() {
        this.setList(this.pics)

    },
    mounted() {}
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
@import "../../../common/style/mixin";
.flip-list-move {
    transition: transform 0.5s;
}
.showpicWrapper {

    .ui.cards > .card {
        width: 120px;
        position: relative;
        cursor: pointer;
        .icon.close {
            z-index: 1;
            .circular_icon();
            right: -10px;
            border-radius: 0.5rem!important;
            .icon_hover_white();
        }
    }
    .ui.cards {
        margin-top: 10px;
    }
}
</style>
